<template>
	<view>
		<view class="item-block">
			<text class="item-lable">视频标题：</text>
			<input placeholder="占位符字体是红色的" class="item-input" v-model="title"/>
		</view>
		<view class="item-block" style="display: flex;align-items: center;justify-content: center;height:auto;"> 
			<text class="item-lable" style="height:auto;">视频上传：</text>
			<view class="item-input" style="background:none;color:#7A7A7A;height:auto;padding:0;"> 
				<image src="../../static/img/news/upVideo.png" class="upload" v-if="!state" @click="chooseVideo"></image>   
				<video :src="url" class="upload" v-if="state" show-center-play-btn :poster="thumb"></video>
			</view>
		</view>
		<button type="primary" style="margin-top:50upx;" @click="submit">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state:0,
				title:'',
				thumb:'',
				url:''
			}
		},
		methods:{
			chooseVideo(){
				var _self = this;
				uni.chooseVideo({
					success: function(res) {  
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: _self.baseUrl + "/Upload/upload",    
							filePath:res.tempFilePath,
							name: 'file',
							success: (res) => {
								var obj = JSON.parse(res.data);
								_self.url = obj.data.list;
								_self.thumb = obj.data.list;
								_self.state=1;
								uni.showToast({
									title: '上传成功',
									duration: 2000
								});
							},
							fail: () => {
								uni.showToast({
									title: '上传失败',
									icon: 'none',
									duration: 2000
								});
							},complete:()=>{
								uni.hideLoading(); 
							}
						})
					}
				})
			},
			submit(){
				var authData = uni.getStorageSync('authData');
				if (authData) {
					var Authorization = authData.auth;
					uni.showLoading({
					    title: '提交中...'
					});
					uni.request({
						url: this.baseUrl+"/Video/add",   
						dataType: "json",
						data:{title:this.title,thumb:this.thumb,url:this.url},           
						header: {
							Authorization: Authorization
						},
						success: (res) => { 
							console.log(JSON.stringify(res));  
							uni.showToast({
							   title: '提交成功',  
							   duration: 2000  
							});  
						},fail:()=>{
							uni.showToast({
								title: '提交失败', 
								icon: 'none',
								duration: 2000
							});
						},
						complete:() => {
							uni.hideLoading();
						}
					})
				} else {
					uni.showToast({
						title: '请先登录',
						icon: 'none',
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 2000);
				}
				
			}
		}
	}
</script>

<style>
	.item-block{
		height:auto;
		padding:5px 0;
		display: flex;
		flex-direction:row;  
		align-items: center; 
		justify-content: center;
		position: relative;
	}
	.item-lable{
		height:auto;
	}
	.item-input{
		height:30px;
		line-height:30px;
		padding:0 5px;
		background:#F2F2F2;
		border-radius: 5px;
		-webkit-flex: 1;
		flex: 1;
		display:flex ;
		align-items: center;
	}
	.upload{
		width:200upx; 
		height:200upx;
	}
</style>
